import React, {FC, ReactElement} from 'react';
import ReactDOM from 'react-dom';

const wrapper = (component: any) => {
  // 销毁组件
  const destoryDialog = (element: HTMLDivElement) => {
    const unmountResult = ReactDOM.unmountComponentAtNode(element);
    if(unmountResult && element.parentNode) {
      setTimeout(() => {
        element.parentNode!.removeChild(element);
      }, 300);
    }
  }
  // 渲染组件
  const render = ({element, component, config} : {
    element: HTMLDivElement,
    component: any,
    config: any
  }) => {
    const comInstance = React.createElement(component, {
      ...config,
      closeDialog: () => {
        destoryDialog(element)
      },
      visible: true
    })
    ReactDOM.render(comInstance, element)
  }
  return function (config: any) { // 挂载div
    const element = document.createElement('div');
    render({element, component, config});
    document.getElementsByTagName('body')[0].appendChild(element);
  }
};

export default wrapper;
